<template>
<!--横向菜单-->
  <div class="B">
    <ul class="menus">
      <li
        :class="{action:key==curr}"
        v-for="(val,key) in menuts"
        :key="key"
        @click="$router.push(val);curr=key"
      >菜单{{key}}</li>
      <!-- <li v-for="key in menuts" >菜单{{key}}</li> -->
    </ul>
    <div class="content">
      <nuxt />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      curr: "a",
      menuts: {
       a: "/a" ,
       b: "/b" ,
       c: "/c" 
      }
    };
  }
};
</script>
<style>
.B li{
  display: inline-block;
}
.menus li{
  color: blue;
  cursor: pointer;
}
.action {
  
  text-decoration: underline;
}
</style>
